<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-space
          class="table-header"
          style="justify-content: space-between; margin-bottom: 18px"
          fill
        >
          <a-input-search
            v-model="keyword"
            placeholder="请输入关键字"
            @press-enter="tableRef.loadData()"
          />
          <div>
            <a-button
              style="margin-right: 10px"
              type="primary"
              @click="
                router.push({
                  path: 'ClockInPlan'
                })
              "
            >
              新增打卡方案
            </a-button>
            <a-button
              type="outline"
              @click="
                router.push({
                  name: 'AttendanceMachineManagement'
                })
              "
            >
              考勤机管理
            </a-button>
          </div>
        </a-space>
        <TableTurn :tableData="getTableData" ref="tableRef">
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="打卡方案名称"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="打卡地点"
          >
            <template #cell="{ record }">
              {{
                addressShow(
                  record.attendanceClockInAddress.organizationWorkPlaceId
                )
              }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="打卡方式"
          >
            <template #cell="{ record }">
              <div
                v-if="Array.isArray(record.type) && record.type.length !== 0"
              >
                小程序：{{ applet(record.type) }}
              </div>
              <div
                v-if="
                  Array.isArray(record.machineIds) &&
                  record.machineIds.length !== 0
                "
              >
                考勤机：{{ machine(record.machineIds) }}
              </div>
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="新增时间"
          >
            <template #cell="{ record }">
              {{ `${dayjs(record.createdAt).format('YYYY-MM-DD')}` }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="操作"
          >
            <template #cell="{ record }">
              <a-tooltip content="编辑">
                <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="edit(record)"
                />
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer',
                      marginRight: '10px'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </TableTurn>
      </main>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import {
  GetAddressList,
  DelAddressData
} from '@/apis/attendance/base-setting/index';
import { useRouter } from 'vue-router';
import { GetWorkPlaceList } from '@/apis/management/organization/organizationManagement';
import citiesJson from '@/assets/json/pc-code.json';
import { flattenArrayWithChildren } from '@/utils/utils';
import { GetMachineList } from '@/apis/attendance/base-setting/index';

const title = '打卡方案';
const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '打卡方案'];
const keyword = ref('');
const tableRef = ref();
const router = useRouter();
let cityData = flattenArrayWithChildren(citiesJson); // 储存扁平化后的数据
const machineList: any = reactive({ data: [] });

const getTableData = async (pageData: any) => {
  try {
    const res = await GetAddressList({ ...pageData, name: keyword.value });
    return res;
  } catch (error) {
    console.log(error);
    return [];
  }
};
const edit = (data: any) => {
  localStorage.setItem('machineManagement', JSON.stringify(data));
  router.push({
    path: 'ClockInPlan'
  });
};
const options = reactive({ data: [] });
const init = async () => {
  const res = await GetWorkPlaceList({ pageNumber: 0, pageSize: -1 });
  const res1 = await GetMachineList({ pageNumber: -1, pageSize: 0 });
  machineList.data = res1.content;
  options.data = res.content;
  options.data.forEach((ele: any) => {
    ele.cityCode =
      cityData.find((item) => item.code === ele.cityCode.slice(0, 2))?.name +
      cityData.find((item) => item.code === ele.cityCode)?.name;
  });
};
init();
const addressShow = (id: number) => {
  const name: any = options.data.filter((ele: any) => ele.id === id);
  if (name.length !== 0) {
    return name[0].name;
  } else {
    return '暂无';
  }
};
const applet = (arr: number[]) => {
  let str = '';
  arr.forEach((ele) => {
    if (ele === 1) {
      if (str.length !== 0) str += '/小程序';
      else str += '小程序';
    }
    if (ele === 2) {
      if (str.length !== 0) str += '/地点';
      else str += '地点';
    }
    if (ele === 3) {
      if (str.length !== 0) str += '/WIFI';
      else str += 'WIFI';
    }
    if (ele === 4) {
      if (str.length !== 0) str += '/人脸识别';
      else str += '人脸识别';
    }
  });
  return str;
};
const machine = (arr: number[]) => {
  let str = '';
  arr.forEach((ele) => {
    machineList.data.forEach((item: any) => {
      if (ele === item.id) {
        if (str.length !== 0) str += '、' + item.name;
        else str += item.name;
      }
    });
  });
  return str;
};
const del = async (id: number) => {
  try {
    await DelAddressData({ ids: [id] });
    tableRef.value.loadData();
  } catch (error) {
    console.log(error);
  }
};
// https://date.nager.at/api/v3/publicholidays/2023/cn
// https://date.appworlds.cn/year/2023
</script>
<style lang="less" scoped></style>
